<template>
	<div class="app">
		<h2>当前计数: {{ $store.state.counter }}</h2>
		<h2>name阿斯蒂芬: {{ $store.state.name }}</h2>
		<!-- <button @click="actionBtnClick">+1</button>
		<button @click="changeNameFn">修改name</button> -->

		<!-- <button @click="incrementAction">+1</button>
		<button @click="changeNameAction('王五')">修改name</button> -->

		<button @click="increment">递增</button>
	</div>
</template>

<script>
	import { mapActions } from 'vuex'
	export default {
		methods: {
			actionBtnClick() {
				// this.$store.dispatch('incrementAction')
			},
			changeNameFn() {
				// this.$store.dispatch('changeNameAction', 'kobe')
			},

			// ...mapActions(['incrementAction', 'changeNameAction']),
		},
	}
</script>

<script setup>
	import { useStore, mapActions } from 'vuex'

	const store = useStore()

	// 使用map映射函数
	/* const actions = mapActions(['incrementAction', 'changeNameAction'])
	const newActions = {}
	Object.keys(actions).forEach((key) => {
		newActions[key] = actions[key].bind({ $store: store })
	})

	const { incrementAction, changeNameAction } = newActions */

	function increment() {
		store.dispatch('incrementAction')
	}
</script>

<style scoped></style>
